<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>.
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>文章发布</title>
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<link rel="stylesheet" href="../../resources/css/artcleedit.css" />
		<script type="text/javascript" src="../../resources/js/moxie.js"></script>
		<script type="text/javascript" src="../../resources/layui/layui.js"></script>
		<script type="text/javascript" src="../../resources/js/plupload.full.min.js"></script>
		<script type="text/javascript" src="../../resources/js/qiniu.js"></script>
	</head>

	<body>
		<jsp:include page="/pages/common/header.jsp"></jsp:include>
		<c:choose>
			<c:when test="${empty sessionScope.userId}">
				<script>
					layui.use('layer', function() {
						var layer = layui.layer;
						layer.msg('您还未登陆！', {
							icon: 2,
							time: 1000,
							end: function() {
								window.location.href = ("/index.jsp");
							}
						});
					});
				</script>
			</c:when>
		</c:choose>
		<div class="main">
			<div class="content">
				<form class="layui-form" method="post">
					<div class="layui-form-item">
						<label class="layui-form-label">文章标题</label>
						<div class="layui-input-block">
							<input type="text" id="title" required name="articleTitle" lay-verify="artcletitle" placeholder="请输入标题" class="layui-input" value="">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">文章缩略图</label>
						<div class="layui-input-block">
							<div id="btn-uploader">
								<span id="pickfiles" class="layui-btn layui-btn-normal">选择文件</span>
								<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" style="background:white;position:absolute;top:9px;width: 690px;margin-left: 100px;">
									<div class="layui-progress-bar" lay-percent="0%"></div>
								</div>
							</div>
						</div>
						<div>
							<img src="" name="articleImg" class="q_img" lay-verify="articleImg" style="width: 200px;height: 130px;display:none;margin-left: 109px;margin-top: 10px;" />
							<input type="hidden" name="img_src" value="" id="in_hiden" />
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">文章分类</label>
						<div class="layui-input-inline" lay-filter="test2">

							<!-- lay-verify="required  用于更新渲染"-->
							<!--form.render();-->
							<!--用于更新渲染-->
							<select class="layui-select" id="articleParentType" lay-filter='selectfilter' >
							</select>

						</div>
						<div class="layui-input-inline">
							<select name="articleSonType" id="articleSonType">
							</select>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">是否显示</label>
						<div class="layui-input-inline">
							<select name="show" id="show">
								<option value="0">是</option>
								<option value="1">否</option>
							</select>
						</div>
					</div>
					<div id="txtarea" name="article.articleContent" lay-verify="articleContent">
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block" id="btn">
							<button class="layui-btn layui-btn-danger" id="articleSubmit" lay-submit lay-filter="play">立即发布</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script>
			layui.use('form', function() {
				var form = layui.form;
				form.verify({
					artcletitle: function(value, item) {
						if(value == "" || /^\s+$/g.test(value)) {
							return '标题不能为空或空格';
						}
					},
					articleImg: function() {
						if($(".q_img").attr("src") == "") {
							return "你还没上传图片呢 ！";
						}
					},
					articleContent: function() {
						if(editor.txt.html() == "<p><br></p>") {
							return "文章内容呢??!";
						}
						if(editor.txt.html().length < 100) {
							return "内容太少啦吧！！";
						}
					}

				});

				form.on('submit(play)', function() {
					var loading = layer.msg('请稍后....正在上传', {
						icon: 16,
						shade: 0.01,
					});
					var title = $("#title").val();
					var img_src = $("#in_hiden").val();
					var smallType = $("#articleSonType").val();
					var show = $("#show").val();
					var content = editor.txt.html();
					//					alert(title + img_src + bigType + smallType + show + content);
					var articledata = {
						"article.articleTitle": title,
						"article.articleImage": img_src,
						"article.articleTypeId": smallType,
						"article.articleState": show,
						"article.articleContent": content
					}
					$.ajax({
						url: '/article/addArticle.action',
						type: 'POST',
						data: articledata,
						dataType: 'json',
						done: function() {
							layer.close(loading, {
								time: 2 * 1000
							});
						},
						success: function(data) {
							if(data.result == true) {
								layer.msg('上传成功！', {
									icon: 1,
									shade: 0.01
								});
								window.location.href = "/pages/article/article.jsp";
							} else {
								layer.msg('上传失败！出现错误了，刷新试试', {
									icon: 2,
									shade: 0.01
								});
								editor.txt.clear();
							}
						},
						error: function() {
							layer.msg("错误");
						}
					});
					return false; //阻止表单跳转
				});
			});
		</script>
		<jsp:include page="/pages/common/footer.jsp"></jsp:include>
		<jsp:include page="/pages/common/editor.html"></jsp:include>
		<script type="text/javascript">
			$(document).ready(function() {
				getTokenMessage();
				$.ajax({
					url: '/article/queryArticleType.action',
					dataType: 'json',
					data: {
						"articleType.articleSubTypeId": 1
					},
					type: 'post',
					success: function(reasult) {
						$('#articleParentType').append("<option>请选择分类</option>");
						$.each(reasult, function(index, item) {
							$('#articleParentType').append("<option value=" + item.articleTypeId + ">" + item.typeValue + "</option>"); //往下拉菜单里添加元素
						})
						renderForm();
					}
				});
			});
			var i = 0;
			layui.use("form",function(){
				var form = layui.form;
				form.on('select(selectfilter)',function(data){
					var obj=document.getElementById('articleSonType'); 
					obj.options.length=0;	 
					$.ajax({
						url: '/article/queryArticleType.action',
						dataType: 'json',
						data: {
							"articleType.articleSubTypeId": data.value
						},
						type: 'post',
						success: function(reasult) {
							$.each(reasult, function(index, item) {
								$('#articleSonType').append("<option value=" + item.articleTypeId + ">" + item.typeValue + "</option>"); //往下拉菜单里添加元素
							})
							renderForm();
						}
					});
				});
			});
			
			
			
			function renderForm() {
				layui.use('form', function() {
					var form = layui.form; //高版本建议把括号去掉，有的低版本，需要加()
					form.render('select');
				});
			}

			function getTokenMessage() {
				$.ajax({
					url: '/qiniu/fileUplaod.action',
					type: 'POST',
					data: {},
					cache: false,
					contentType: false, //不可缺
					processData: false, //不可缺
					dataType: 'json',
					success: function(data) {
						var obj = data;
						uploaderReady(obj.uptoken);
					}
				});
			}
		</script>
	</body>

</html>